<template>
    <div class="form">
        <div class="apply-box">
            <div class="apply-content">
                <img :src="info.headimgurl" />
                <p class="apply-title">
                    <span>{{info.nickname}}</span>
                    <i>筹款人</i>
                </p>
                <p class="apply-info">谢谢您为我献出爱心,大恩大德,永不能忘!</p>
            </div>
        </div>
        <div class="titlebox">
            <p>选择帮助金额</p>
        </div>
        <ul class="select-money">
            <li
                v-for="item in list"
                :key="item"
                :class="{activecss:active==item}"
                @click="tabmoneys(item)"
            >
                <p>{{item}}元</p>
            </li>
        </ul>
        <div class="money">
            <van-field v-model="money" type="digit" placeholder="其他金额" maxlength="10" :input="moneys()" />
        </div>
        <div class="goHelp_check">
            <van-checkbox v-model="checked" checked-color="#5FC8AF"></van-checkbox>
            <div class="clause">
                <span>我已阅读并符合</span>
                <i @click.stop="showpopup()">《用户协议》</i>
            </div>
        </div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '70%' }">
            <yonghu/>
        </van-popup>
        <div class="titlebox">
            <p>我要留言</p>
        </div>
        <div class="textarea">
            <van-field
                v-model="message"
                rows="3"
                type="textarea"
                maxlength="50"
                placeholder="苦难是暂时的，加油！一定会好起来的！"
            />
        </div>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="sub()"
            >立即支持</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Checkbox, Toast, Popup, Button } from "vant";
import { userFundraisingListDeatil, payTest } from "@/api/api";
import wx from "weixin-js-sdk";
import yonghu from "@/components/yonghu";
export default {
    components: {
        [Field.name]: Field,
        [Checkbox.name]: Checkbox,
        [Popup.name]: Popup,
        [Button.name]: Button,
        yonghu
    },
    data() {
        return {
            id: "",
            money: "",
            message: "",
            checked: false,
            info: {},
            list: [5, 10, 20, 50, 100, 500],
            active: 100,
            show: false
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    },
    methods: {
        getData() {
            userFundraisingListDeatil({ prepare_id: this.id }).then(res => {
                this.info = res.fundraisingDetail;
            });
        },
        tabmoneys(e) {
            this.money = "";
            this.active = e;
        },
        moneys() {
            if (this.money) {
                this.active = 0;
            }
        },
        showpopup() {
            this.show = true;
        },
        sub() {
            var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;

            if (this.active == "" && this.money == "") {
                Toast("请输入选择帮助金额");
                return;
            }
            if (this.money != "" && !isNum.test(this.money)) {
                Toast("请输入正确的金额");
                return true;
            }
            if (!this.checked) {
                Toast("请同意协议");
                return;
            }
            console.log(this.money || this.active);
            let money = this.money || this.active
            payTest({
                prepare_id: this.id,
                donator_money: money,
                donator_desc: this.message
            }).then(res => {
                let data = res;
                WeixinJSBridge.invoke(
                    "getBrandWCPayRequest",
                    {
                        appId: "wx2c31ac22d50b2954", //公众号名称，由商户传入
                        timeStamp: data.results.timeStamp,
                        nonceStr: data.results.nonceStr,
                        package: data.results.packages,
                        signType: "MD5", //微信签名方式：
                        paySign: data.results.paySign // 支付签名
                    },
                    res => {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            Toast("支付成功");
                            this.$router.push({
                                path: "/Detail",
                                query: { id: this.id }
                            });
                        }
                    }
                );
            });
        }
    }
};
</script>

<style scoped>
.apply-box {
    margin: 24px 24px 0;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 16px;
}
.apply-content {
    width: 100%;
    background: #ffffff;
    position: relative;
    padding-left: 64px;
    box-sizing: border-box;
}
.apply-content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.apply-title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.2;
    display: flex;
    align-items: center;
    padding-top: 4px;
}
.apply-title span {
    display: inline-block;
    max-width: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.apply-title i {
    font-style: normal;
    text-align: center;
    display: inline-block;
    margin-left: 8px;
    height: 22px;
    width: 45px;
    background: rgba(255, 60, 60, 0.08);
    border: 1px solid rgba(255, 60, 60, 0.08);
    border-radius: 0.22222222rem;
    font-size: 12px;
    font-weight: bold;
    color: #ff3c3c;
    line-height: 22px;
}
.apply-info {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 14px;
    width: 100%;
}
.titlebox {
    height: 68px;
    padding: 24px 24px 16px;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 3.7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.select-money {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 24px 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.select-money li {
    display: block;
    width: 26.67vw;
    height: 48px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    border: 1px solid transparent;
}
.select-money li p {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.56);
    line-height: 48px;
}
.select-money .activecss {
    background: rgba(255, 60, 60, 0.08);
    border-radius: 12px;
    border: 1px solid #ff3c3c;
}
.select-money .activecss p {
    font-weight: bold;
    color: #ff3c3c;
}
.money {
    box-sizing: border-box;
    padding: 0 24px;
}
.goHelp_check {
    display: flex;
    margin-top: 15px;
    height: 24px;
    align-items: center;
    font-size: 12px;
    padding: 0 24px;
    box-sizing: border-box;
}
.clause {
    line-height: 14px;
}
.goHelp_check span {
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    line-height: 14px;
    position: relative;
    top: 2px;
    padding: 0 5px 0 15px;
    box-sizing: border-box;
}
.goHelp_check i {
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    color: #5fc8af;
    position: relative;
    top: 2px;
}
.textarea {
    padding: 0 24px 70px 24px;
    box-sizing: border-box;
}
.form .textarea .van-cell {
    height: 80px;
    min-height: 80px;
    box-sizing: border-box;
}
</style>